<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


<div class="container">
    <h1>The Activity Page</h1>
	<div>
		<button class="btn btn-primary" onclick="javascript:location.href='doActivityEditUI'"
				type="button">普通方式添加
		</button>

		<button class="btn btn-primary" data-toggle="modal"
				onclick="doShowAddDialog()" type="button">模态框方式添加
		</button>
	</div>
	<div>
		<table class="table">
			<thead>
			<tr>
				<th>id</th>
				<th>title</th>
				<th>category</th>
				<th>startTime</th>
				<th>endTime</th>
				<th>state</th>
				<th>createdTime</th>
				<th colspan="2">Operation</th>
			</tr>
			</thead>
			<tbody>
			<tr th:each="a:${list}">
				<td th:text="${a.id}"></td>
				<td th:text="${a.title}"></td>
				<td th:text="${a.category}"></td>
				<td th:text="${#dates.format(a.startTime, 'yyyy/MM/dd HH:mm')}"></td>
				<td th:text="${#dates.format(a.endTime, 'yyyy/MM/dd HH:mm')}"></td>
				<td th:text="${a.state}"></td>
				<td th:text="${#dates.format(a.createdTime, 'yyyy/MM/dd HH:mm')}"></td>
				<td>
					<button class="btn btn-danger btn-sm" th:onclick="doDeleteById([[${a.id}]])">删除</button>
					<button class="btn btn-warning btn-sm" th:onclick="doLoadById([[${a.id}])">更新</button>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>
<!-- Modal -->
<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog"
	 tabindex="-1">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-label="Close" class="close" data-dismiss="modal"
						type="button">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body">
				<form action="doSaveActivity" class="form-horizontal" id="atyFormId" method="post">
					<input id="atyId" name="id" type="hidden">
					<div class="form-group">
						<label class="col-sm-2 control-label" for="titleId">title</label>
						<div class="col-sm-10">
							<input class="form-control" id="titleId" name="title"
								   placeholder="title" type="text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="categoryId">category</label>
						<div class="col-sm-10">
							<input class="form-control" id="categoryId" name="category"
								   placeholder="category" type="text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="startTimeId">startTime</label>
						<div class="col-sm-10">
							<input class="form-control" id="startTimeId" name="startTime"
								   placeholder="yyyy/MM/dd" type="text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="endTimeId">endTime</label>
						<div class="col-sm-10">
							<input class="form-control" id="endTimeId" name="endTime"
								   placeholder="yyyy/MM/dd" type="text">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label" for="remarkId">remark</label>
						<div class="col-sm-10">
								<textarea class="form-control" id="remarkId" name="remark"
										  placeholder="remark"></textarea>
						</div>
					</div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                <button class="btn btn-primary" onclick="doSaveActivity()" type="button">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- 当在页面中需要使用bootstrap插件时，需要添加如下两个js，但也要注意顺序 -->
<script src="/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- 假如要在js中获取thymeaf表达式中的数据script标签内部需要th:inline="javascript" -->
<script th:inline="javascript">
    $(function () {//页面加载完成以后执行
        var aty = [[${aty}]];//在js中获取thyemeaf表达式中的内容
        //console.log("aty",aty); 在浏览器输出相关内容
        if (aty) {
            doInitEditFormData(aty)
        }
    });

	function doInitEditFormData(aty) {
		$("#atyId").val(aty.id);
		$("#titleId").val(aty.title);
		$("#categoryId").val(aty.category);
		$("#startTimeId").val(aty.startTime);
		$("#endTimeId").val(aty.endTime);
		$("#remarkId").text(aty.remark);
		//显示模态框
		$('#myModal').modal('show');

	}

	//呈现添加模态框
	function doShowAddDialog() {
		$("#atyId").val('');
		$("#titleId").val('');
		$("#categoryId").val('');
		$("#startTimeId").val('');
		$("#endTimeId").val('');
		$("#remarkId").text('');
		//显示模态框
		$('#myModal').modal('show');
	}

	function doLoadById(id) {
		location.href = "doFindById?id=" + id;
	}

	function doDeleteById(id) {
		if (!confirm("确定删除吗")) return;
		location.href = "doDeleteById?id=" + id;
	}

	function doSaveActivity() {
		// alert("save activity");
		//对表单内容进行校验
		//执行表单提交操作(基于js方式提交表单)
		$("#atyFormId").submit();
		//关闭模态框
		$('#myModal').modal('hide');
	}
</script>
</body>
</html>




